<template>
  <view>
    <heardData></heardData>
    <view class="content">
      <view class="list">
        <uni-section class="mb-10" title="基本信息" type="line"></uni-section>
        <uni-list>
          <uni-list-item title="客户名称" :rightText="details.khmc" />
          <uni-list-item title="手机号码" :rightText="details.khsj" />
          <uni-list-item title="邮寄地址" :rightText="details.khdz" />
          <uni-list-item title="付款方式" :rightText="details.fkfswz" />
        </uni-list>
      </view>
      <view class="list">
        <uni-section class="mb-10" title="商品信息" type="line"></uni-section>
        <view class="table">
          <uni-table ref="table" border stripe emptyText="暂无更多数据">
            <uni-tr>
              <uni-th align="center">商品名称</uni-th>
              <uni-th align="center">商品SKU</uni-th>
              <uni-th align="center">购买数量</uni-th>
              <uni-th align="center">邮寄地址</uni-th>
            </uni-tr>
            <uni-tr v-for="(item, index) in details.lstTbYOrderproduct" :key="index">
              <uni-td>{{ item.cpmc }}</uni-td>
              <uni-td>{{ item.cpsku }}</uni-td>
              <uni-td>{{ item.sl }}</uni-td>
              <uni-td>{{ item.yjdz }}</uni-td>
            </uni-tr>
          </uni-table>
        </view>
      </view>
      <view class="list">
        <uni-section class="mb-10" title="订单信息" type="line"></uni-section>
        <uni-list>
          <uni-list-item title="支付金额" :rightText="details.yfdj" />
          <uni-list-item title="支付凭证" :rightText="details.dddjpz" >
			<template v-slot:footer>
				<text style="color: #999; font-size: 24rpx;">{{details.dddjpz || '-'}}</text>
				<image v-if="details.dddjtpdz" class="slot-image" :src="details.dddjtpdz" mode="widthFix"></image>
			</template>
		  </uni-list-item>
          <uni-list-item title="经办人" :rightText="details.ddjbr" />
          <uni-list-item title="订单类型" :rightText="ddlx(details.ddlx)" />
          <uni-list-item title="订单渠道" :rightText="ddqd(details.ddqd)" />
          <uni-list-item title="订单日期" :rightText="details.ddrq" />
		  <uni-list-item title="订单余额" :rightText="details.ddwkje" />
          <uni-list-item title="尾款凭证" :rightText="details.ddwkpz" >
			<template v-slot:footer>
				<text style="color: #999; font-size: 24rpx;">{{details.ddwkpz || '-'}}</text>
				<image v-if="details.ddwktpdz" class="slot-image" :src="details.ddwktpdz" mode="widthFix"></image>
			</template>
		  </uni-list-item>
          <uni-list-item title="尾款日期" :rightText="details.ddwkzfrq" />
          <uni-list-item title="产品号段" :rightText="details.cphd" />
        </uni-list>
      </view>
      <view class="list">
      </view>
    </view>
  </view>
</template>

<script>
import heardData from "../../component/heard.vue" //组件引入
export default {
  components: { heardData },
  data() {
    return {
      details: {},
      ckData: [],
	  ddlxData: []
    }
  },
  onLoad(query) {
    console.log(query)
    if (query.ddbh) {
      this.detailsData(query.ddbh)
    }
    this.getWorkDropdownList()
  },
  created() {

  },
  methods: {
    detailsData(ddbh) {
      uni.showLoading({ title: '加载中...' });
      this.$request('mobile/getOrderInfo', 'post', { yhsj: uni.getStorageSync('mobile'), ddbh: ddbh }).then(res => {
        uni.hideLoading();
        if (res.code == 200) {
          this.details = res.data.order
        } else {
          uni.showToast({ title: res.msg, icon: 'none' });
        }
      })
    },
    getWorkDropdownList() {
      this.$request('mobile/getDropdownList', 'post', [{ type: '订单渠道' }]).then(res => {
        if (res.code == 200) {
          if (res.data.length > 0 && res.data[0].value) {
            res.data[0].value.forEach(item => {
              item.value = item.dictCode
              item.text = item.dictValue
            })
            this.ckData = res.data[0].value
          }
        }
      })
	  this.$request('mobile/getDropdownList', 'post', [{ type: '订单类型' }]).then(res => {
	    if (res.code == 200) {
	      if (res.data.length > 0 && res.data[0].value) {
	        res.data[0].value.forEach(item => {
	          item.value = item.dictCode
	          item.text = item.dictValue
	        })
	        this.ddlxData = res.data[0].value
	      }
	    }
	  })
    },
    ddqd(val) {
			if(val){
			return this.ckData.find(item => item.value == val).text
		}
    },
	ddlx (val) {
		if(val){
			return this.ddlxData.find(item => item.value == val).text
		}
	}
  }
}
</script>

<style lang="scss">
.content{
	padding-bottom: 10rpx;
}
.list {
  margin: 20rpx;
}
.slot-image{
	width: 200rpx;
	height: 200rpx;
}
.table {
  padding: 0 10rpx;
	.uni-table {
	  width: 100% !important;
	  min-width: auto !important;
	  .uni-table-th {
	    font-size: 26rpx !important;
				   white-space: nowrap;
           background: #e4ebf6;
	  }
				.uni-table-td {
					word-break: break-all;
				}
	}
}
</style>